<template>
    <div class="addGateway">
        <div class="title">选择WiFi</div>
        <div class="banner">
            <div class="wifiList" v-for="(item,index) in wifi">
                <div class="flex">
                    <div class="flexItem">{{item.name}}</div>
                    <div class="flexItem">
                        <label class="radio" :for="'wifiName'+index">
                            <input class="wifiName" :id="'wifiName'+index" name="wifiName" type="radio" value=""/>
                            <div></div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="password">
            <div class="flex">
                <input class="password" id="password" name="password" value="" placeholder="请输入wifi密码"/>
            </div>
        </div>
        <div class="buttonList" v-for="(item,index) in items">
            <div class="flex">
                <div class="flexItem">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'AddGatewayStep3',
        components: {},
        data () {
            return {
                wifi: [{name: 'wifi1', checked: true}, {name: 'wifi2', checked: true}],
                items: [{name: '下一步'}],
            }
        },
        created () {
            this.getTagCloudData()
        },
        methods: {
            onGeneralClick: function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            }
        }
    }
</script>

<style scoped>
    /*标题*/
    .addGateway > .title {
        text-align: left;
        margin: 1.5vh 0 1vh 10vw;
        min-height: 4vh;
        color: #757575;
    }

    /*wifi列表*/
    .addGateway > .banner {
        width: 100vw;
        min-height: 50vh;
        background: url(../../assets/addGatewayChoose_01.png) no-repeat center top;
        background-size: 92% 100%;
    }

    .addGateway > .banner > .wifiList > .flex {
        width: 80%;
        border-bottom: 1px solid rgba(201, 201, 201, 0.3);
        height: 8vh;
        margin-left: 10vw;
        display: flex;
        justify-content: space-between;
    }

    .addGateway > .banner > .wifiList > .flex > .flexItem {
        align-self: center;
    }

    /**radio重写样式*/
    .addGateway > .banner > .wifiList > .flex > .flexItem > .radio {
        /*设置lable标签大小，用于触发事件*/
        width: 5vw;
        height: 5vw;
    }

    .addGateway > .banner > .wifiList > .flex > .flexItem > .radio > input {
        /*隐藏原生*/
        opacity: 0;
        display: none;
    }

    .addGateway > .banner > .wifiList > .flex > .flexItem > .radio > div {
        /*重写默认样式*/
        width: 5vw;
        height: 5vw;
        background: url(../../assets/addGatewayChoose_03.png) no-repeat center top;
        background-size: 100% 100%;
    }

    .addGateway > .banner > .wifiList > .flex > .flexItem > .radio > input:checked + div {
        /*选中后样式*/
        width: 5vw;
        height: 5vw;
        background: url(../../assets/addGatewaychoose_02.png) no-repeat center top;
        background-size: 100% 100%;
    }

    /*密码输入框*/
    .addGateway > .password {
        width: 92%;
        margin-left: 4vw;
        margin-top: 20px;
    }

    .addGateway > .password > .flex {
        display: flex;
        justify-content: center;
    }

    .addGateway > .password > .flex > .password {
        /*删除样式*/
        outline: 0;
        -web-kit-appearance: none;
        -moz-appearance: none;

        width: 100%;
        height: 10vh;
        align-self: center;
        font-size: 1em;
        background: url(../../assets/addGatewayChoose_04.png) no-repeat center top;
        background-size: 100% 100%;
        border-radius: 15px;
        border: 1px solid #c8cccf;
        color: #6a6f77;
    }

    /*按钮*/
    .addGateway > .buttonList > .flex {
        width: 100vw;
        min-height: 8vh;
        margin-top: 8vh;
        display: flex;
        justify-content: center;
        line-height: 10vh;

    }

    .addGateway > .buttonList > .flex > .flexItem {
        width: 50vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
        align-self: center;
    }
</style>
